import { Avatar, Button, Popover } from "antd";
import { Header } from "antd/es/layout/layout";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
} from "@ant-design/icons";
import styles from "./index.module.less";
import GenBreadCrumb from "../genBreadCrumb";
import { useLocation, useNavigate } from "react-router-dom";
const CustHeader: React.FC<{
  collapsed: boolean;
  changeSider: (isShow: boolean) => void;
}> = (props: any) => {
  const navigate = useNavigate();
  const { changeSider, collapsed } = props;
  const logout = () => {
    sessionStorage.clear();
    localStorage.clear();
    navigate(`/login?redirect=${window.location.pathname}`);
  };
  const content = (
    <div onClick={logout} className={styles.menus_wrap}>
      退出登录
    </div>
  );
  return (
    <Header
      className={styles.header_wrap}
      style={{
        padding: 0,
        background: "#fff",
        display: "flex",
        justifyContent: "space-between",
      }}
    >
      <div style={{ display: "flex", alignItems: "center" }}>
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => changeSider(!collapsed)}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
        />
        <GenBreadCrumb />
      </div>
      <div>
        <Avatar
          style={{ backgroundColor: "#87d068" }}
          icon={<UserOutlined />}
        />
        <Popover className={styles.popover} content={content} trigger="hover">
          <span style={{ margin: "0 30px 0 8px", cursor: "pointer" }}>
            userName1
          </span>
        </Popover>
      </div>
    </Header>
  );
};

export default CustHeader;
